import React, { useState } from 'react';
import { Col,Form,Input,Radio,Modal,Table } from 'antd';
import { getfoot,postfoot,deletefoot } from '../../../api/user'

export const Foot = (props) => {


    // 设置餐饮弹框状态  默认隐藏
    const [foodstate, setfoodstate] = useState(false);
  
    // 点击 “餐饮时” 显示弹出框
    const showfood = () => {
       setfoodstate(true);
      //  网络请求获取列表
       getfoot().then(res => {
        console.log(res.data)
        setfootdata(
          footdata = res.data
        )
      })
     };
  
    // 点击 确认 餐饮弹框状态   隐藏弹框
   const handleOk = () => {
    setfoodstate(false);
   };
  
    // 点击 取消 餐饮弹框状态   隐藏弹框  
   const handleCancel = () => {
    setfoodstate(false);
   };
  
    
    // 添加 餐饮消费  弹框  默认隐藏
    const [addfoot, setaddfoot] = useState(false);
  
   // 点击 “+时” 显示弹出框
   const addfootmethod = () => {
    setaddfoot(true)
  
   }
  
     // 点击 添加 餐饮弹框状态   隐藏弹框
     const footmethodOk = () => {
       // 隐藏弹框
       setaddfoot(false);

      // 先把需要的数据 写成一个对象
      let footadd = {
        id:footdata.length+1,
        key:`${footdata.length+1}`,
        name:footvalue,
        money:`¥${moneyvalue}`,
        address: "x"
      }

      // 网络请求 添加数据  调用方法 把对象加进去数组里
      postfoot(footadd).then(res => {
        console.log("addfootres",res);
         setfootdata(
              footdata = [...footdata,footadd]
         )
      })

      // 清空 输入框里的内容
      setfootvalue(
        footvalue = ""
      )
      setmoneyvalue(
        moneyvalue = ""
      )
      console.log(footdata);
     };
    
      // 点击 取消 餐饮弹框状态   隐藏弹框  
     const footmethodCancel = () => {
      setaddfoot(false);
     };
 
    // 餐饮 表单头
    const columns = [
      {
        title: '商品名称',
        dataIndex: 'name',
      },
      {
        title: '单价',
        className: 'column-money',
        dataIndex: 'money',
        align: 'Center',
      },
      {
        title: '操作',
        dataIndex: 'address',
        align: 'Center',
        // record获取整行数据
        render: (text,record) => <a onClick={ ()=>delfoot(record) }>{text}</a>,
      },
    ];
  
    // 点击X的时候 删除整行数据
    const delfoot = (record) => {

      // 网络请求  点击哪个数据 过滤哪个数据
      deletefoot(record.id).then(res => {
        // console.log("addfootres",res);
        setfootdata(
          footdata = footdata.filter((item)=>{
          return (item.id != record.id)
        })
        )
      })


      console.log(footdata);
    }
  
    // 餐饮列表
    let [footdata,setfootdata] = useState([]);

    // 保存商品名称
    let [footvalue,setfootvalue] = useState("") 
    // 保存商品价格
    let [moneyvalue,setmoneyvalue] = useState("") 
  
  return (
   <>
 
         <Col span={8}>
          <Form.Item label="餐饮">
             <Radio.Button  style={{ fontSize:"20px" , width:"150px" }} onClick={showfood}>+消费商品</Radio.Button>
          </Form.Item>
         </Col>

      {/* 餐饮消费商品 模态框 */}
     <Modal title="餐饮" open={foodstate} onOk={handleOk} onCancel={handleCancel} okText="保存" cancelText="取消" >
     <Table
       //  表单头
      columns={columns}
       //  餐饮消费商品列表
      dataSource={footdata}
      bordered
      //   页脚的+号
      footer={() => <button  style={{
        width: '435px',
        height:'60px',
      }}
      onClick={addfootmethod}
      >+</button>}/>
       </Modal>
  
      {/* 餐饮消费商品列表添加项目 模态框 */}
       <Modal title="添加商品" open={addfoot} onOk={footmethodOk} onCancel={footmethodCancel} okText="添加" cancelText="取消" >
  
       <span>项目名称：</span><Input placeholder="请输入商品名称" 
        value={footvalue} onChange={e => setfootvalue(e.target.value)}
       style={{
        width:"200px",
        marginBottom:"20px"
       }} />
  
       <br/>
  
       <span>项目单价：</span><Input placeholder="请输入商品单价" 
            value={moneyvalue} onChange={e => setmoneyvalue(e.target.value)}
       style={{
        width:"200px"
       }} />
       </Modal>
   </>
  );
  }